<template>
    <div class="setup">
        <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="back" />
        <ul>
            <li v-for="(item, index) in userInfoData" :key="index">
                <img :src="item.icon" />
                <h2>{{ item.title }}</h2>
                <span>&gt;</span>
            </li>
        </ul>
    </div>
</template>

<script>
import { getUserInfo } from "@/api/api";
export default {
    name: "Setupcp",
    data() {
        return {
            userInfoData: []
        }
    },
    created() {
        //获取用户中心配置
        getUserInfo()
            .then(res => {
                res.data.data.confs.map((item, index) => {
                    if (index > 3) {
                        this.userInfoData.push({
                            title: item.title,
                            icon: item.icon
                        });
                    }
                });
            })
            .catch(err => {
                console.log(err);
            });
    },
    methods: {
        //返回上一级
        back() {
            this.$store.state.showSetup = false
        }
    }
}
</script>

<style lang="scss" scoped>
.setup {
    ::v-deep .van-nav-bar__title {
        color: #333;
        font-size: 18px;
        font-weight: bold;
    }

    ::v-deep .van-nav-bar__text,
    ::v-deep .van-nav-bar .van-icon {
        color: #777;
        font-size: 14px;
    }

    ul {
        border: 1px solid #f1f1f1;
        margin: 10px 0;
        border-radius: 10px;
        padding: 0 5px;

        li {
            height: 50px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f1f1f1;

            &:last-child {
                border-bottom: none;
            }

            img {
                width: 35px;
                height: 35px;
                margin-right: 10px;
            }

            h2 {
                font-size: 18px;
            }

            span {
                flex: 1;
                text-align: right;
                font-size: 16px;
                font-weight: bold;
                color: #777;
            }
        }
    }
}
</style>